<template>
  <el-container>
    <!--头部区域-->
    <el-header>
      <div class="logo">
        <img src="../assets/dengling_logo1.png" alt />
        <span>瞪羚科技后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出登录</el-button>
    </el-header>
    <el-container>
      <!--导航栏区-->
      <el-aside width="200px">
        <!--侧边栏菜单区-->
        <el-menu background-color="#021737" text-color="#fff" active-text-color="#ffd04b">
          <!--一级菜单-->
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="newsList_btn">
              <!--文本-->
              <span>新闻列表</span>
            </el-menu-item>
            <el-menu-item index="1-2" @click="recruimentList_btn">
              <span>招聘信息列表</span>
            </el-menu-item>
            <el-menu-item index="1-3" @click="projectList_btn">
              <span>项目介绍信息列表</span>
            </el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
              <template slot="title">回收站</template>
              <el-menu-item index="1-4-1" @click="newsRecovery_btn">
              <!--文本-->
                <span>新闻回收站</span>
              </el-menu-item>
              <el-menu-item index="1-4-2" @click="recruimentRecovery_btn">
                <span>招聘信息回收站</span>
              </el-menu-item>
              <el-menu-item index="1-4-3" @click="projectRecovery_btn">
                <span>项目介绍信息回收站</span>
              </el-menu-item>
        </el-submenu>
        </el-menu>
      </el-aside>
      <!--右侧内容主体-->
      <el-main>
        <router-view v-if="isShow"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  methods: {
    reload() {
      this.isShow = false;
      this.$nextTick(function () {
        this.isShow = true;
      });
    },
    async logout() {
      const { data: res } = await this.$http.get('user/logout');
      if (res.code !== 1000) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.$router.push('/login');
    },
    newsList_btn() {
      this.$router.push('/newsList');
    },
    recruimentList_btn() {
      this.$router.push('/recruitmentList');
    },
    newsRecovery_btn() {
      this.$router.push('/recycle_binNews');
    },
    recruimentRecovery_btn() {
      this.$router.push('/recycle_binRecruitment');
    },
    projectList_btn(){
      this.$router.push('/project_introduction')
    },
    projectRecovery_btn(){
      this.$router.push('/recycleBinProject')
    }
  }
}
</script>

<style scoped>
.el-container {
  height: 100%;
}
.el-header {
  background-color: #021737;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-header > div {
  display: flex;
  align-items: center;
}
.el-header > div > span {
  margin-left: 15px;
}
img {
  height: 40px;
  width: auto;
}
.el-aside {
  background-color: #021737;
}
.el-main {
  background-color: #eee;
}
</style>